<template>
  <div>
    <!-- <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="我的申请" name="first">我的申请</el-tab-pane>
      <el-tab-pane label="待我审批" name="second">待我审批</el-tab-pane>
      <el-tab-pane label="我已审批" name="third">我已审批</el-tab-pane>
    </el-tabs> -->

    <el-card>
      <!-- 搜索栏 -->
      <el-row :gutter="20" style="margin-bottom: 15px">
      <el-col :span="6">
        <el-select
            v-model="queryInfo.processId"
            placeholder="请选择请假类型"
            clearable
            style="width: 240px"
        >
            <el-option
              v-for="item in templateList"
              :key="item.templateId"
              :label="item.templateName"
              :value="item.templateId"
            />
        </el-select>
      </el-col>

      <el-col :span="6">
        <el-select
            v-model="queryInfo.status"
            placeholder="请选择审批状态"

            clearable
            style="width: 240px"
        >
            <el-option
              v-for="item in approvalStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
        </el-select>
      </el-col>

      <el-col :span="6">
        <el-button type="primary" icon="Search" @click="getApplyList">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
            <el-button @click="handleAdd" >添加</el-button>

      </el-col>
      </el-row>

      <!-- 2.2 表格 -->
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%; margin-top: 15px"
      >
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="templateName" label="申请类型" />
        <el-table-column prop="applyTime" label="申请时间" />
        <el-table-column label="启用状态">
          <template #default="{ row }">
            {{ statusMap[row.currentStatus] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)" v-if="row.currentStatus == 'draft'">撤销</el-button>
            <!-- <el-button type="danger" size="small" @click="handleDelete(row)" v-if="row.status == 0">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 2.3 分页 -->
      <el-pagination
        v-model:currentPage="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getApplyList"
        @current-change="getApplyList"
        style="margin-top: 15px; text-align: right"
      />
    </el-card>

    <!-- 申请弹出框 -->
    <el-dialog title="申请" v-model="open" width="500px" append-to-body>
        <el-form ref="processApplyRef" :model="processApplyForm" :rules="rules" label-width="100px">
          <el-form-item label="流程" prop="templateId">
               <el-select
                  v-model="processApplyForm.templateId"
                  placeholder="请选择"
                  clearable
                  style="width: 240px"
                  >
                  <el-option
                    v-for="templateDefine in templateList"
                    :key="templateDefine.templateId"
                    :label="templateDefine.templateName"
                    :value="templateDefine.templateId"
                  />
               </el-select>
            </el-form-item>
          <el-form-item label="备注" prop="remarks">
              <el-input v-model="processApplyForm.remarks" placeholder="请输入备注" />
          </el-form-item>
  
        </el-form>
        <template #footer>
          <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script setup >
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import{approvalTemplateList} from '../../request/process/template'

import {approvalApplyList,approvalCreateApply} from '../../request/process/apply'




const activeTab = ref('first')

//加载流程类型
const templateList = ref([])
const getProcessList = async () => {
	let data = await approvalTemplateList();
  templateList.value = data.map(item=>{
    return {
      templateId: item.templateId,
      templateName: item.templateName
    }
  });
}
getProcessList()

//加载审批状态
const approvalStatusList = ref([{
  label: '已发起',
  value: 'draft'
},{
  label: '审批中',
  value: 'pending'
},{
  label: '已通过',
  value: 'approved'
},{
  label: '已拒绝',
  value: 'rejected'
},{
  label: '已取消',
  value: 'canceled'
}])

// 查询参数
const queryInfo = reactive({
  templateId: '',
  status: '',
  pageNum: 1,
  pageSize: 10
})
const tableData = ref([])
const total = ref(0)
// 获取列表
const getApplyList = async () => {
	let data =await approvalApplyList(queryInfo);
	tableData.value = data.records
	total.value = data.total;
}
getApplyList()

//重置查询条件
function resetQuery(){
	queryInfo.templateId='';
	queryInfo.status='';
	queryInfo.pageNum=1;
	queryInfo.pageSize=10
	getApplyList()
}

const open = ref(false)

const processApplyForm = ref({
    templateId: '',
    remarks: ''
})
const rules = reactive({
	templateId: [
      { required: true, message: '请选择模板', trigger: 'blur' }
    ],
    remarks: [
      { required: true, message: '请输入备注', trigger: 'blur' }
    ]
})

function handleAdd(){
  open.value = true

}
function cancel(){
  open.value = false
  processApplyForm.value = {
    processId: '',
    remarks: ''
  }
}
const processApplyRef = ref(null);
function submitForm(){
  processApplyRef.value.validate((valid) => {
    if (valid) {
      // 提交表单数据
      console.log('表单数据:', processApplyForm.value);
      processApplyForm.value.applyData = {a:1,b:2}
      approvalCreateApply(processApplyForm.value).then(res=>{
        ElMessage.success('添加成功')
        getApplyList()
        cancel()
      })
    } else {
      console.log('校验失败');
    }
  });

}

const statusMap = ref({
  draft: '已发起',
  pending: '审批中',
  approved: '已通过',
  rejected: '已拒绝',
  canceled: '已取消'
})
</script>
